import React, { useState } from "react";
import { View, Text, Image, Button } from "@tarojs/components";
import "./index.scss";
import Taro from "@tarojs/taro";

const ShoppingCart = () => {
  const [activeTab, setActiveTab] = useState<"cart" | "frequent">("cart");
  const handleLogin = () => {
    Taro.navigateTo({
      url: "/packageContacts/pages/login/index",
    });
  };
  // 模拟推荐商品数据
  const recommendProducts = [
    {
      id: 1,
      image: "",
      name: "有机花生 500g",
      price: "29.9",
    },
    {
      id: 2,
      image: "",
      name: "坚果零食大礼包",
      price: "59.9",
    },
    // 更多商品...
  ];

  return (
    <View className="container">
      {/* 顶部标签栏 */}
      <View className="tabBar">
        <View
          className={`tab ${activeTab === "cart" ? "activeTab" : ""}`}
          onClick={() => setActiveTab("cart")}
        >
          购物车
        </View>
        <View
          className={`tab ${activeTab === "frequent" ? "activeTab" : ""}`}
          onClick={() => setActiveTab("frequent")}
        >
          我常买
        </View>
      </View>

      {/* 空购物车状态 */}
      <View className="emptyCart">
        <Image className="emptyCartIcon" src="" />
        <Text className="emptyText">购物车是空的</Text>
        <Button className="loginBtn" onClick={handleLogin}>
          去登录
        </Button>
      </View>

      {/* 推荐商品区域 */}
      <View className="recommendSection">
        <Text className="recommendTitle">您可能还需要</Text>
        <View className="productGrid">
          {recommendProducts.map((product) => (
            <View key={product.id} className="productItem">
              <Image className="productImage" src={product.image} />
              <View className="productInfo">
                <Text className="productName">{product.name}</Text>
                <Text className="productPrice">¥{product.price}</Text>
                <View className="addToCartBtn">+</View>
              </View>
            </View>
          ))}
        </View>
      </View>
    </View>
  );
};

export default ShoppingCart;
